import React, {useEffect, useRef, useState} from "react";
import {Dimensions, StyleSheet, View, Text, TouchableHighlight, TextInput} from "react-native";
import {Switch} from "react-native-elements/dist/switch/switch";
import {
    checkWalletPassword,
    getWalletInfo,
    getWalletUseFinger,
    nowWallet,
    updateWalletUseFinger
} from "./smartxL2Libs/L2_Data";
import {fontSize_14, fontSize_16} from "./theme";
import {SvgXml} from "react-native-svg";
import {closeeyeSvgXml, openeyeSvgXml} from "../libs/svgXml";
import SimpleToast from "react-native-simple-toast";
import {BottomSheet} from "react-native-elements/dist/bottomSheet/BottomSheet";
import FingerPrintPopup from "../components/FingerPrint/FingerPrint";
import FingerprintScanner from "react-native-fingerprint-scanner";

const {width,height,scale} = Dimensions.get("window");

const L2_SettingPayByFinger = ({navigation,route}:any) => {
    const [openFinger,setOpenFinger] = useState(false);
    //显示密码输入框
    const [showInputPassword,setShowInputPassword] = useState(false)
    const [passwordInput,setPasswordInput] = useState("")
    const [showPassword,setShowPassword] = useState(false)
    //密码input的ref
    const inputPasswordRef = useRef(null);
    useEffect(()=>{
        navigation.setOptions({
            title:"指纹设置"
        })
        initOpenFinger()
    },[])
    const initOpenFinger = async () => {
        let walletFinger = await getWalletUseFinger(nowWallet.chainID, nowWallet.address)
        setOpenFinger(walletFinger)
    }
    const switchOpenFinger = () => {
        FingerprintScanner
            .isSensorAvailable()
            .then(()=>{
                setShowInputPassword(true)
                setTimeout(()=>{
                    console.log(inputPasswordRef)
                    inputPasswordRef && inputPasswordRef.current.focus()
                },200)
            })
            .catch(()=>{
                SimpleToast.show("您的设备暂未开启指纹")
            })

    }
    const checkPasswordToDo = async () => {
        try {
            let checkPasswordRes = await checkWalletPassword(nowWallet.chainID, nowWallet.address, passwordInput);
            if (!checkPasswordRes.success) {
                SimpleToast.show(checkPasswordRes.falseReason);
                return;
            }
            console.log(checkPasswordRes)
            setShowInputPassword(false)
            let walletInfo = await getWalletInfo(nowWallet.chainID,nowWallet.address);
            if(!(walletInfo && walletInfo.privateKey))
            {
                SimpleToast.show("地址私钥不存在")
                return ;
            }
            await updateOpenFinger()
        } catch (e) {
            console.log(e)
        }
    }
    const updateOpenFinger = async () => {
        let res = await updateWalletUseFinger(nowWallet.chainID, nowWallet.address, !openFinger)
        if (res.success)
        {
            setOpenFinger(!openFinger)
            return
        }
        SimpleToast.show(res.falseReason)

    }
    return (
        <View style={styles.container}>
            <View style={{flexDirection:"row",alignItems:"center",width:"100%",height:50,backgroundColor:"white",justifyContent:"space-between",padding:10}}>
                <Text>开启指纹</Text>
                <Switch value={openFinger} color={"#2082fd"} thumbColor={openFinger?'#2082fd':'#ebebeb'} onChange={switchOpenFinger}/>
            </View>
            <BottomSheet
                modalProps={{animationType:"fade"}}
                isVisible={showInputPassword}
            >
                <View style={{width:width,height:height-1,backgroundColor: 'rgba(0.5, 0.25, 0, 0.2)'}}>
                    <TouchableHighlight
                        underlayColor={"rgba(0.5, 0.25, 0, 0.2)"}
                        onPress={()=>{
                            setPasswordInput("")
                            setShowPassword(false)
                            setShowInputPassword(false)
                        }}
                        style={{flex:1,backgroundColor:"rgba(0.5, 0.25, 0, 0.2)",alignItems:"center",justifyContent:"center"}}
                    >
                        <TouchableHighlight underlayColor={"rgba(0.5, 0.25, 0, 0.2)"} style={{width:"100%"}}>
                            <View style={{borderRadius:5,width:"100%",alignItems:"center"}}>
                                <View style={{
                                    width:"80%",
                                    backgroundColor:"#f5f6f8",
                                    padding:20,
                                    borderTopRightRadius:5,
                                    borderTopLeftRadius:5,
                                    alignItems:"center",
                                    borderBottomWidth:1/scale,
                                    borderBottomColor:"#b4b5b7",
                                }}>
                                    <Text style={{fontSize:fontSize_16,fontWeight:"bold",marginBottom:20}}>输入密码</Text>
                                    <View style={{
                                        width:"100%",
                                        backgroundColor:"white",
                                        padding:5,
                                        borderRadius:5,
                                        borderWidth:1/scale,
                                        borderColor:"#bebfc1"}}>

                                        <TextInput
                                            secureTextEntry={!showPassword}
                                            placeholder={"请输入钱包密码"}
                                            style={{
                                                width:"80%",
                                                fontSize:fontSize_16,
                                                padding:0
                                            }}
                                            ref={ inputPasswordRef}
                                            autoFocus={false}
                                            onChangeText={(value)=>{setPasswordInput(value.trim())}}
                                        />

                                        <SvgXml xml={showPassword?openeyeSvgXml("#9c9c9c"):closeeyeSvgXml("#9c9c9c")} width={20} height={20} onPress={()=>{
                                            setShowPassword(!showPassword)
                                        }}
                                                style={{
                                                    position:"absolute",
                                                    right:15,
                                                    bottom:8
                                                }}
                                        />
                                    </View>
                                </View>
                                <View style={{
                                    width:"80%",
                                    height:45,
                                    backgroundColor:"#f5f6f8",
                                    borderBottomRightRadius:5,
                                    borderBottomLeftRadius:5,
                                    flexDirection:"row"
                                }}>
                                    <TouchableHighlight underlayColor={"#f5f6f8"} style={{flex:1,alignItems:"center",justifyContent:"center",borderRightWidth:1/scale,borderRightColor:"#b4b5b7"}}
                                                        onPress={()=>{
                                                            setPasswordInput("")
                                                            setShowPassword(false)
                                                            setShowInputPassword(false)
                                                        }}>
                                        <Text style={{fontSize:fontSize_14}}>
                                            取消
                                        </Text>
                                    </TouchableHighlight>
                                    <TouchableHighlight underlayColor={"#f5f6f8"} style={{flex:1,alignItems:"center",justifyContent:"center"}} onPress={() => {
                                        checkPasswordToDo()
                                    }}>
                                        <Text style={{fontSize:fontSize_14}}>
                                            确认
                                        </Text>
                                    </TouchableHighlight>
                                </View>
                            </View>
                        </TouchableHighlight>
                    </TouchableHighlight>
                </View>
            </BottomSheet>

        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width,
        alignItems: "center",
        flexDirection: "column",
        paddingLeft: 0,
        paddingRight: 0,
        backgroundColor: "#f6f6f6"
    },
})
export default L2_SettingPayByFinger;


